<template>
   <div id="copyPage">
        <div style="background-color: #fff; padding-bottom: 15px;">
            <div class="title">
                <van-icon name="apps-o" size="16"></van-icon>
                <span>&nbsp;ETH&nbsp;/&nbsp;USDT</span>
            </div>
            <div class="transaction">
                <div class="left">
                    <div class="btnGroup">
                        <div class="buy" :class="{cur: state === 'buy'}" @click="state='buy'">买入</div>
                        <div class="sell" :class="{cur: state === 'sell'}" @click="state = 'sell'">卖出</div>
                    </div>
                    <div class="step">
                        <div class="inputBox">
                            <input type="text" placeholder="价格">
                        </div>
                        <p>≈904.86&nbsp;CNY</p>
                    </div>
                    <div class="count">
                        <div class="inputBox">
                            <input type="text" placeholder="数量">
                            <div class="type">ETH</div>
                        </div>
                        <p>
                            可用&nbsp;
                            <em>0.9010001993</em>&nbsp;ETH
                        </p>
                    </div>
                    <div class="number">
                        <button>1/4</button>
                        <button>1/2</button>
                        <button>全仓</button>
                    </div>
                    <div class="total">
                        交易额:
                        <em>-USDT</em>
                    </div>
                    <div class="btn buy" v-if="state=='buy'">买入ETH</div>
                    <div class="btn sell" v-if="state=='sell'">卖出ETH</div>
                </div>
                <div class="right">
                    <div class="fr handicap" id="handicap" style="width: 100%;">
                        <div class="handicap-title">
                            <span class="index">盘口</span>
                            <span class="price">价格</span>
                            <span class="amount">数量</span>
                        </div>
                        <div class="handicap-sell" id="handicap-sell">
                            <dl style="background-size:100% 100%;" data-price="165.34">
                                <dt class="fl">5</dt>
                                <dd class="fl">165.34</dd>
                                <dd class="fr">23.7304</dd>
                            </dl>
                            <dl style="background-size:50% 100%;" data-price="165.33">
                                <dt class="fl">4</dt>
                                <dd class="fl">165.33</dd>
                                <dd class="fr">11.8511</dd>
                            </dl>
                            <dl style="background-size:21% 100%;" data-price="165.32">
                                <dt class="fl">3</dt>
                                <dd class="fl">165.32</dd>
                                <dd class="fr">4.8972</dd>
                            </dl>
                            <dl style="background-size:26% 100%;" data-price="165.31">
                                <dt class="fl">2</dt>
                                <dd class="fl">165.31</dd>
                                <dd class="fr">6.2846</dd>
                            </dl>
                            <dl style="background-size:1% 100%;" data-price="165.30">
                                <dt class="fl">1</dt>
                                <dd class="fl">165.30</dd>
                                <dd class="fr">0.2095</dd>
                            </dl>
                        </div>
                        <div class="handicap-price color-up color-down">
                            <em id="nowprice" data-nowprice="165.27">165.27</em>
                            <b class="rate">+0.09%</b>
                            <span>
                    ≈
                    <b id="now-price-equivalent">¥1132.99</b>
                    </span>
                        </div>
                        <div class="handicap-buy" id="handicap-buy">
                            <dl style="background-size:21% 100%;" data-price="165.26">
                                <dt class="fl">1</dt>
                                <dd class="fl">165.26</dd>
                                <dd class="fr">5.0722</dd>
                            </dl>
                            <dl style="background-size:51% 100%;" data-price="165.25">
                                <dt class="fl">2</dt>
                                <dd class="fl">165.25</dd>
                                <dd class="fr">12.1640</dd>
                            </dl>
                            <dl style="background-size:25% 100%;" data-price="165.23">
                                <dt class="fl">3</dt>
                                <dd class="fl">165.23</dd>
                                <dd class="fr">5.9690</dd>
                            </dl>
                            <dl style="background-size:45% 100%;" data-price="165.22">
                                <dt class="fl">4</dt>
                                <dd class="fl">165.22</dd>
                                <dd class="fr">10.6800</dd>
                            </dl>
                            <dl style="background-size:1% 100%;" data-price="165.21">
                                <dt class="fl">5</dt>
                                <dd class="fl">165.21</dd>
                                <dd class="fr">0.3555</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="history">
            <div class="title">当前委托</div>
            <div class="empty">
                <img src="" alt="">
                <p>暂无记录</p>
            </div>
        </div>
   </div>
</template>

<script>
    export default {
        name: 'transaction',
        data() {
            return {
                state: 'buy'
            }
        }
    };
</script>

<style scoped lang="scss">
#copyPage {
    font-family: Roboto, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", serif !important;
    font-weight: 300;
}
    .title {
        padding-left: 10px;
        height: 45px;
        font-size: 15px;
        font-weight: 700;
        line-height: 45px;
        position: relative;
        color: #1f3f59;
        display: flex;
        align-items: center;
    }
    .transaction {
        display: flex;
        padding-left: 10px;
        .left {
            width: 55%;
            .btnGroup {
                div {
                    margin-right: 20px;
                    display: inline-block;
                    font-size: 16px;
                    font-weight: 700;
                }
                .buy {
                    color: #03ad8f !important;
                    border-color: #03ad8f !important;
                    padding: 6px 10px;
                }
                .sell {
                    color: #d14b64 !important;
                    border-color: #d14b64 !important;
                    padding: 6px 10px;
                }
                .cur {
                    border-bottom: 2px solid;
                }
            }
            .step,
            .count {
                margin-top: 10px;
                .inputBox {
                    border: 1px solid #c8cfd5;
                    font-size: 18px;
                    font-weight: 700;
                    height: 50px;
                    line-height: 50px;
                    display: flex;
                    width: 100%;
                    input {
                        width: 100%;
                        flex: 1;
                        padding: 0 10px;
                        border: none;
                        outline: none;
                    }
                }
            }
            .step {
                p {
                    color: #c5cfd5;
                    font-size: 12px;
                    padding-top: 3px;
                }
            }
            .count {
                .type {
                    color: #8c9fad;
                    font-size: 16px;
                    font-weight: 400;
                    margin-right: 10px;
                }
                p {
                    color: #8c9fad;
                    font-size: 12px;
                    padding-top: 3px;
                    em {
                        color: #1f3f59;
                        font-style: normal;
                    }
                }
            }
            .number {
                display: flex;
                border: 1px solid #c8cfd5;
                height: 35px;
                line-height: 35px;
                margin-top: 15px;
                button {
                    flex: 1;
                    border: none;
                    outline: none;
                    background-color: #fff;
                    color: #8c9fad;
                    font-size: 12px;
                    &:active {
                        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                    }
                    &:visited {
                        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                    }
                }
            }
            .total {
                padding-top: 30px;
                font-size: 14px;
                color: #8c9fad;
                em {
                    font-style: normal;
                    font-weight: 700;
                    color: #1f3f59;
                }
            }
            .btn {
                height: 45px;
                font-size: 14px;
                line-height: 45px;
                font-weight: 700;
                color: #fff;
                text-align: center;
                margin-top: 10px;
                &.buy {
                    background-color: #03ad8f;
                }

                &.sell {
                    background-color: #d14b64;
                }
            }
        }
        .right {
             width: 45%;
            padding-left: 15px;
            padding-top: 15px;
            .handicap-title {
                height: 25px;
                font-size: 12px;
                color: #c5cfd5;
                margin-right: 15px;
                white-space: nowrap;

                .index {
                    margin-right: 15px;
                }

                .amount {
                    float: right;
                }
            }

            .handicap-price {
                height: 43px;
                box-sizing: border-box;
                padding-top: 6px;
                font-size: 0;
                color: #d14b64!important;
            }

            .handicap-price em {
                height:  15px;
                line-height: 15px;
                font-size: 15px;
                font-weight: 700;
                float: left;
                white-space: nowrap
            }

            .handicap-price em+b {
                line-height: 15px;
                vertical-align: baseline;
                float: left
            }

            .handicap-price b {
                font-size: 12px;
                margin-left: 5px;
                vertical-align: unset;
                font-weight: 300;
            }

            .handicap-price span {
                color: #c5cfd5;
                font-size: 12px;
                line-height: 12px;;
                display: block;
                margin-top: 15px;    
            }

            dl {
                line-height: 1.6;
                &::after {
                    content: '';
                    clear: both;
                    height: 100%;
                    display: block;
                }
            }
            .fl {
                float: left;
            }

            .fr {
                float: right;
            }
            dt {
                width: 12px;
            }


            dd {
                letter-spacing: -1px;
            }
            dd:last-of-type {
                color: #8c9fad;
                margin-right: 15px;
            }
            .handicap-sell {
                color: #d14b64!important;
                font-weight: 400;
                font-weight: 10px;
            }

            .handicap-buy {
                color: #03ad8f!important;
                font-weight: 400;
                font-weight: 10px;
            }

        }
    }

    .history {
        background-color: #fff;
        margin-top: 15px;
        color: #1f3f59;
        .empty {
            height: 240px;
            text-align: center;
            color: #c5cfd5;
            font-size: 12px;
            box-sizing: border-box;
            padding-top: 55px;
            img {
                display: block;
                margin: 0 auto 10px;
                width: 160px;
            }
        }
    }
    .history .title {
        height: 60px;
        line-height: 60px;
        font-size: 16px;
        padding-left: 15px;
    }
</style>
